<template>
  <view class="news-item" @click="handleClick">
    <view class="news-content">
      <view class="news-text">
        <text class="news-title">{{ news.title }}</text>
        <text class="news-summary">{{ news.summary }}</text>
        <view class="news-meta">
          <text class="news-author">{{ news.author }}</text>
          <text class="news-time">{{ formatRelativeTime(news.publishTime) }}</text>
          <view class="news-stats">
            <view class="stat-item">
              <uni-icons type="eye" size="12" color="#999"></uni-icons>
              <text class="stat-text">{{ formatNumber(news.viewCount) }}</text>
            </view>
            <view class="stat-item">
              <uni-icons type="heart" size="12" color="#999"></uni-icons>
              <text class="stat-text">{{ formatNumber(news.likeCount) }}</text>
            </view>
            <view class="stat-item">
              <uni-icons type="chat" size="12" color="#999"></uni-icons>
              <text class="stat-text">{{ formatNumber(news.commentCount) }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="news-image" v-if="news.coverImage">
        <image 
          :src="news.coverImage" 
          mode="aspectFill"
          class="cover-image"
          :lazy-load="true"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { formatRelativeTime, formatNumber } from '@/utils/format.js'

// 定义 props
const props = defineProps({
  news: {
    type: Object,
    required: true
  }
})

// 定义 emits
const emit = defineEmits(['click'])

// 处理点击事件
const handleClick = () => {
  emit('click', props.news)
}
</script>

<style scoped>
.news-item {
  background: #ffffff;
  margin: 0 30rpx 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.news-item:active {
  transform: scale(0.98);
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.12);
}

.news-content {
  display: flex;
  gap: 20rpx;
}

.news-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.news-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-summary {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-top: auto;
}

.news-author {
  font-size: 24rpx;
  color: #4CAF50;
  font-weight: 500;
}

.news-time {
  font-size: 24rpx;
  color: #999999;
}

.news-stats {
  display: flex;
  gap: 24rpx;
  margin-left: auto;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.stat-text {
  font-size: 22rpx;
  color: #999999;
}

.news-image {
  width: 200rpx;
  height: 140rpx;
  border-radius: 12rpx;
  overflow: hidden;
  flex-shrink: 0;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 无图片时的样式调整 */
.news-content:not(:has(.news-image)) .news-text {
  width: 100%;
}
</style>
